<template>
  <div class="official-store">

    <!-- 抢购页面内容 -->
    <div v-show="activeTab === 'flash-sale'" class="tab-content">

    </div>

    <!-- 官方商城页面内容 -->
    <div v-show="activeTab === 'store'" class="tab-content">
      <!-- 商品列表区 -->
      <section class="new-products-section">
        <div class="section-container">
          <div class="section-header">
            <div class="header-content">
              <div class="title-row">
                <h2 class="section-title">
                  商品列表
                </h2>
                <p class="section-subtitle">精选优质商品，满足你的所有需求</p>
              </div>
              <!-- 商品分类分段控制器 -->
              <div class="header-action">
                <el-segmented 
                  v-model="activeProductCategory" 
                  :options="productCategoryOptions"
                  size="large"
                  @change="handleProductCategoryChange"
                />
              </div>
            </div>
          </div>
          <div v-loading="loading" class="new-products-grid">
            <!-- 空状态 -->
            <div v-if="!loading && newProducts.length === 0" class="empty-state">
              <div class="empty-icon">
                <el-icon size="80px">
                  <Box />
                </el-icon>
              </div>
              <h3 class="empty-title">暂无商品</h3>
              <p class="empty-description">当前分类下暂时没有商品，请尝试切换其他分类或稍后再来看看</p>
              <el-button 
                type="primary" 
                class="refresh-btn"
                @click="() => fetchOfficialStoreList(false)"
              >
                <el-icon><Refresh /></el-icon>
                刷新页面
              </el-button>
            </div>
            
            <!-- 商品列表 -->
            <div 
              v-for="product in newProducts" 
              :key="product.id" 
              class="new-product-card"
              @click="handleNewProductClick(product)"
            >
              <div class="product-image">
                <el-image
                  :src="product.imageUrl"
                  fit="cover"
                  class="product-image-container"
                >
                  <template #error>
                    <div class="product-icon">
                      <el-icon size="48px">
                        <component :is="product.icon" />
                      </el-icon>
                    </div>
                  </template>
                </el-image>
                <!-- <div v-if="product.imageUrl" class="product-image-container">
                  <img :src="getFullImageUrl(product.imageUrl)" class="product-image-thumb" alt="商品图片" />
                </div> -->

                <div class="product-badges">
                  <span v-if="product.isPet" class="badge badge-pet">精灵</span>
                  <span v-if="product.isItem" class="badge badge-item">道具</span>
                  <span v-if="product.isFashion" class="badge badge-fashion">时装</span>
                  <span v-if="product.isPrivilege" class="badge badge-privilege">特权</span>
                  <span v-if="product.isGiftPack" class="badge badge-giftpack">排位</span>
                </div>
              </div>
              <div class="product-content">
                <h3 class="product-title">{{ product.name }}</h3>
                <p class="product-desc">{{ product.description }}</p>
                <div class="product-price">
                  <span class="price-current">{{ product.price }} {{ product.currencyName }}</span>
                  <div class="stock-and-limit-row">
                    <div v-if="product.stockQuantity !== -1" class="stock-info">
                      库存：{{ product.stockQuantity }}
                    </div>
                    <div v-else class="stock-info unlimited">
                      库存：999+
                    </div>
                    <!-- 限购信息 -->
                    <div v-if="product.limitType && product.maxQuantity" class="limit-info">
                      <el-icon><Clock /></el-icon>
                      限购：{{ product.maxQuantity }}件/{{ getLimitTypeName(product.limitType) }}
                    </div>
                  </div>
                </div>
                <div class="product-actions">
                  <el-button 
                    type="success" 
                    class="action-btn buy-now"
                    @click.stop="handleBuyNowClick(product)"
                  >
                    立即购买
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 加载更多按钮 -->
          <div v-if="!loading && newProducts.length > 0 && hasMoreData" class="load-more-container">
            <el-button 
              type="primary" 
              :loading="loadingMore"
              @click="loadMoreProducts"
              class="load-more-btn"
            >
              {{ loadingMore ? '加载中...' : '加载更多' }}
            </el-button>
          </div>
          
          <!-- 没有更多数据提示 -->
          <div v-if="!loading && newProducts.length > 0 && !hasMoreData" class="no-more-data">
            <span>已加载全部商品</span>
          </div>
        </div>
      </section>
    </div>

    <!-- 商品详情弹窗 -->
    <el-dialog 
      v-model="productDetailVisible" 
      title="商品详情" 
      width="500px" 
      :close-on-click-modal="false"
      class="product-detail-dialog"
    >
      <div v-if="selectedProduct" class="product-detail-content">
        <!-- 商品基本信息 -->
        <div class="product-info">
          <div class="product-icon-large">
                <el-image
                  :src="selectedProduct.imageUrl"
                  fit="cover"
                  class="product-image-container-large"
                >
                  <template #error>
                    <div class="product-icon-fallback">
                      <el-icon size="80px">
                        <component :is="selectedProduct.icon" />
                      </el-icon>
                    </div>
                  </template>
                </el-image>
            <!-- <div v-if="selectedProduct.imageUrl" class="product-image-container-large">
              <img :src="getFullImageUrl(selectedProduct.id)" class="product-image-large" alt="商品图片" />
            </div>
            <div v-else class="product-icon-fallback">
              <el-icon size="80px">
                <component :is="selectedProduct.icon" />
              </el-icon>
            </div> -->
          </div>
          <div class="product-meta">
            <h3 class="product-name">{{ selectedProduct.name }}</h3>
            <p class="product-description">{{ selectedProduct.description }}</p>
          </div>
          <div class="product-badges">
            <span v-if="selectedProduct.isPet" class="badge badge-pet">精灵</span>
            <span v-if="selectedProduct.isItem" class="badge badge-item">道具</span>
            <span v-if="selectedProduct.isFashion" class="badge badge-fashion">时装</span>
            <span v-if="selectedProduct.isPrivilege" class="badge badge-privilege">特权</span>
            <span v-if="selectedProduct.isGiftpack" class="badge badge-giftpack">排位</span>
          </div>
        </div>

        <!-- 价格和数量选择 -->
        <div class="purchase-section">
          <div class="price-info">
            <div class="price-row">
              <span class="price-label">单价：</span>
              <span class="price-value">{{ selectedProduct.price }} {{ getCurrencyType(selectedProduct.currencyType) }}</span>
            </div>
            <div v-if="selectedProduct.originalPrice" class="original-price-row">
              <!-- <span class="original-price">原价：{{ selectedProduct.originalPrice }} XIN</span> -->
              <!-- <span class="discount-amount">省{{ selectedProduct.originalPrice - selectedProduct.price }} XIN</span> -->
            </div>
            <!-- 限购信息 -->
            <div v-if="selectedProduct.limitType && selectedProduct.maxQuantity" class="limit-info-dialog">
              <el-icon><Clock /></el-icon>
              <span>限购：{{ selectedProduct.maxQuantity }}件/{{ getLimitTypeName(selectedProduct.limitType) }}</span>
            </div>
          </div>

          <div class="quantity-section">
            <div class="quantity-row">
              <span class="quantity-label">数量：</span>
              <el-input-number 
                v-model="purchaseQuantity" 
                :min="1" 
                :max="99" 
                size="default"
                class="quantity-input"
              />
            </div>
          </div>

          <div class="total-section">
            <div class="total-row">
              <span class="total-label">总计：</span>
              <span class="total-price">{{ totalPrice }} {{ selectedProduct ? getCurrencyType(selectedProduct.currencyType) : 'XIN' }}</span>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="productDetailVisible = false">取消</el-button>
          <el-button type="primary" @click="handlePurchaseConfirm">确认购买</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 悬浮按钮 -->
    <el-button 
      type="primary" 
      class="floating-btn"
      circle
      size="large"
      @click="showPurchaseRecords"
    >
      <el-icon><Document /></el-icon>
    </el-button>

    <!-- 购买记录弹窗 -->
    <el-dialog 
      v-model="purchaseRecordsVisible" 
      title="购买记录" 
      width="800px" 
      :close-on-click-modal="false"
      class="purchase-records-dialog"
    >
      <div class="purchase-records-content">
        <!-- 记录列表 -->
        <div v-loading="recordsLoading" class="records-list">
          <!-- 空状态 -->
          <div v-if="!recordsLoading && purchaseRecords.length === 0" class="empty-records">
            <div class="empty-icon">
              <el-icon size="60px"><Document /></el-icon>
            </div>
            <h3 class="empty-title">暂无购买记录</h3>
            <p class="empty-description">您还没有购买过任何商品</p>
          </div>
          
          <!-- 记录项 -->
          <div 
            v-for="record in purchaseRecords" 
            :key="record.id" 
            class="record-item"
          >
            <div class="record-info">
              <div class="record-product">
                <div class="product-icon">
                  <el-icon size="32px"><Present /></el-icon>
                </div>
                <div class="product-details">
                  <h4 class="product-name">{{ record.productName }}</h4>
                  <p class="product-desc">订单号：{{ record.orderNo }}</p>
                </div>
              </div>
              <div class="record-meta">
                <div class="record-quantity">
                  <span class="label">数量：</span>
                  <span class="value">{{ record.quantity }}</span>
                </div>
                <div class="record-price">
                  <span class="label">总价：</span>
                  <span class="value">{{ record.totalPrice }} {{ getCurrencyType(record.currencyType) }}</span>
                </div>
                <div class="record-time">
                  <el-icon><Clock /></el-icon>
                  <span>{{ formatTime(record.createdAt) }}</span>
                </div>
              </div>
            </div>
            <div class="record-status">
              <el-tag 
                type="success"
                size="small"
              >
                购买成功
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="recordsPagination.currentPage"
              :page-size="recordsPagination.limit"
              :total="recordsPagination.totalCount"
              layout="total, prev, pager, next"
              @current-change="handleRecordsPageChange"
            />
          </div>
          <el-button @click="purchaseRecordsVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 二级密码验证对话框 -->
    <el-dialog 
      v-model="secondaryPasswordVisible" 
      title="安全验证" 
      width="400px" 
      :close-on-click-modal="false" 
      :close-on-press-escape="false"
    >
      <div class="secondary-password-container">
        <p class="verification-message">为保障您的账户安全，请输入二级密码进行验证</p>
        <el-form :model="secondaryPasswordForm" ref="secondaryPasswordFormRef">
          <el-form-item prop="password">
            <el-input
              v-model="secondaryPasswordForm.password"
              type="password"
              show-password
              placeholder="请输入6位数字二级密码"
              maxlength="6"
              @keyup.enter="confirmSecondaryPassword"
            />
          </el-form-item>
        </el-form>
        <div class="verification-actions">
          <el-button @click="cancelSecondaryPasswordVerification">取消</el-button>
          <el-button type="primary" :loading="verificationLoading" @click="confirmSecondaryPassword">
            确认验证
          </el-button>
        </div>
        <p class="verification-tip">如您未设置二级密码，请前往个人资料-账号安全中设置</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { 
  Timer, 
//   Target, 
  ShoppingCart,
  Box, 
  Star, 
  Present, 
  Trophy, 
  User, 
//   Magic,
  Lightning,
  Refresh,
  Lock,
  ArrowRight,
  ShoppingBag,
  // Cpu,
  Medal,
  // Gift
  Document,
  Clock
} from '@element-plus/icons-vue'
import { ElMessage, ElLoading } from 'element-plus'
import SvgIcon from '@/components/SvgIcon.vue'
import { formatBadge } from '@/utils/currency.js'
import { getOfficialStoreList, purchaseProduct, getPurchaseRecords } from '@/api/officialStore'
import { verifySecondaryPassword } from '@/api/user' // 导入二级密码验证API
import { getFullImageUrl } from '@/utils'

// 响应式数据
const countdown = reactive({
  hours: 2,
  minutes: 30,
  seconds: 45
})

const activeFilter = ref('all')
const activeTab = ref('store') // 默认显示抢购页面
const activeProductCategory = ref('全部') // 商品分类分段控制器当前选中项

// 商品详情弹窗相关数据
const productDetailVisible = ref(false)
const selectedProduct = ref(null)
const purchaseQuantity = ref(1)

// 分页和加载状态
const loading = ref(false)
const loadingMore = ref(false)
const hasMoreData = ref(true)
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  totalPage: 1,
  totalCount: 0
})

// 计算总价
const totalPrice = computed(() => {
  if (!selectedProduct.value) return 0
  return selectedProduct.value.price * purchaseQuantity.value
})

// 商品分类选项
const productCategoryOptions = ref([
  { label: '全部', value: '全部' },
  { label: '精灵', value: 'SPIRIT' },
  { label: '道具', value: 'ITEM' },
  { label: '时装', value: 'COSTUME' },
  { label: '特权', value: 'PRIVILEGE' },
  { label: '排位', value: 'PACKAGE' }
])

// 购买记录相关数据
const purchaseRecordsVisible = ref(false)
const purchaseRecords = ref([])
const recordsLoading = ref(false)
const recordsPagination = reactive({
  currentPage: 1,
  limit: 10,
  totalPage: 1,
  totalCount: 0
})

// 二级密码验证相关数据
const secondaryPasswordVisible = ref(false)
const secondaryPasswordForm = reactive({
  password: ''
})
const secondaryPasswordFormRef = ref(null)
const verificationLoading = ref(false)
const pendingOperation = ref(null)

// 限时抢购商品数据
const flashSaleItems = ref([])


// 商品筛选器
const productFilters = ref([
  { id: 'all', name: '全部' },
  { id: 'new', name: '新品' },
  { id: 'hot', name: '热销' },
  { id: 'discount', name: '特价' }
])

// 商品数据
const products = ref([])

// 计算属性：过滤后的商品
const filteredProducts = ref([])

// 倒计时定时器
let countdownTimer = null

// 官方商城分类数据
const storeCategories = ref([])

// 推荐商品数据
const recommendedProducts = ref([])

// 商品数据
const newProducts = ref([])

// 货币类型映射
const getCurrencyType = (currencyType) => {
  const currencyMap = {
    1: 'XIN',
    5: 'XING', 
    400503: '徽章'
  }
  return currencyMap[currencyType] || 'XIN'
}

// 限购类型映射
const getLimitTypeName = (limitType) => {
  const limitTypeMap = {
    1: '日',
    2: '周',
    3: '月'
  }
  return limitTypeMap[limitType] || limitType
}

// 根据商品类型获取图标
const getProductIcon = (productType) => {
  const iconMap = {
    'SPIRIT': Lightning,
    'ITEM': Star,
    'COSTUME': User,
    'PRIVILEGE': Trophy,
    'PACKAGE': Present
  }
  return iconMap[productType] || Star
}

// 根据商品类型设置标签
const getProductBadges = (productType) => {
  return {
    isPet: productType === 'SPIRIT',
    isItem: productType === 'ITEM',
    isFashion: productType === 'COSTUME',
    isPrivilege: productType === 'PRIVILEGE',
    isGiftPack: productType === 'PACKAGE'
  }
}

// 方法
const setActiveTab = (tab) => {
  activeTab.value = tab
}

const setActiveFilter = (filterId) => {
  activeFilter.value = filterId
  filterProducts()
}

const filterProducts = () => {
  if (activeFilter.value === 'all') {
    filteredProducts.value = products.value
  } else if (activeFilter.value === 'pet') {
    filteredProducts.value = products.value.filter(p => p.isPet)
  } else if (activeFilter.value === 'item') {
    filteredProducts.value = products.value.filter(p => p.isItem)
  } else if (activeFilter.value === 'fashion') {
    filteredProducts.value = products.value.filter(p => p.isFashion)
  } else if (activeFilter.value === 'privilege') {
    filteredProducts.value = products.value.filter(p => p.isPrivilege)
  } else if (activeFilter.value === 'giftpack') {
    filteredProducts.value = products.value.filter(p => p.isGiftpack)
  } else if (activeFilter.value === 'discount') {
    filteredProducts.value = products.value.filter(p => p.originalPrice)
  }
}

const handleFlashSaleClick = (item) => {
  console.log('抢购商品:', item)
  // 这里可以添加抢购逻辑
}

const handleCategoryClick = (category) => {
  console.log('选择分类:', category)
  // 这里可以添加分类筛选逻辑
}

const handleProductClick = (product) => {
  console.log('查看商品:', product)
  selectedProduct.value = product
  purchaseQuantity.value = 1
  productDetailVisible.value = true
}



const handleStoreCategoryClick = (category) => {
  console.log('选择商城分类:', category)
  // 这里可以添加商城分类筛选逻辑
}

const handleRecommendedClick = (product) => {
  console.log('查看推荐商品:', product)
  // 这里可以添加商品详情页跳转逻辑
}

const loadMoreRecommended = () => {
  console.log('加载更多推荐商品')
  // 这里可以添加推荐商品分页加载逻辑
}

const handleNewProductClick = (product) => {
  console.log('查看新品商品:', product)
  selectedProduct.value = product
  purchaseQuantity.value = 1
  productDetailVisible.value = true
}

const loadMoreNewProducts = () => {
  console.log('加载更多新品商品')
  // 这里可以添加新品商品分页加载逻辑
}

const handleProductCategoryChange = (value) => {
  console.log('切换商品分类:', value)
  activeProductCategory.value = value
  // 重置分页和滚动状态
  pagination.currentPage = 1
  hasMoreData.value = true
  newProducts.value = []
  fetchOfficialStoreList()
}

// 获取官方商城列表
const fetchOfficialStoreList = async (isLoadMore = false) => {
  try {
    if (isLoadMore) {
      loadingMore.value = true
    } else {
      loading.value = true
    }
    
    const params = {
      currentPage: pagination.currentPage,
      limit: pagination.pageSize
    }
    
    // 如果选择了具体分类，添加productType参数
    if (activeProductCategory.value !== '全部') {
      params.productType = activeProductCategory.value
    }
    
    const response = await getOfficialStoreList(params)
    
    if (response.code === 200) {
      const { data } = response
      
      // 更新分页信息
      pagination.currentPage = data.currentPage
      pagination.totalPage = data.totalPage
      pagination.totalCount = data.totalCount
      
      // 检查是否还有更多数据
      hasMoreData.value = data.currentPage < data.totalPage
      
      // 转换API数据为前端需要的格式
      const newItems = data.list.map(item => ({
        id: item.id,
        name: item.name,
        imageUrl: item.imageUrl,
        description: item.description,
        price: item.price,
        currencyType: item.currencyType,
        currencyName: item.currencyName,
        stockQuantity: item.stockQuantity,
        productType: item.productType,
        status: item.status,
        limitType: item.limitType,
        maxQuantity: item.maxQuantity,
        icon: getProductIcon(item.productType),
        ...getProductBadges(item.productType)
      }))
      
      // 如果是加载更多，追加数据；否则替换数据
      if (isLoadMore) {
        newProducts.value = [...newProducts.value, ...newItems]
      } else {
        newProducts.value = newItems
      }
    } else {
      ElMessage.error(response.msg || '获取商品列表失败')
    }
  } catch (error) {
    console.error('获取商品列表失败:', error)
    ElMessage.error('获取商品列表失败，请稍后重试')
  } finally {
    loading.value = false
    loadingMore.value = false
  }
}

// 加载更多商品
const loadMoreProducts = async () => {
  if (!hasMoreData.value || loadingMore.value) return
  
  pagination.currentPage += 1
  await fetchOfficialStoreList(true)
}

// 立即购买按钮点击处理函数
const handleBuyNowClick = (product) => {
  console.log('立即购买:', product)
  selectedProduct.value = product
  purchaseQuantity.value = 1
  productDetailVisible.value = true
}

// 确认购买处理函数
const handlePurchaseConfirm = async () => {
  if (!selectedProduct.value) return
  
  try {
    const params = {
      productId: selectedProduct.value.id,
      quantity: purchaseQuantity.value
    }
    
    // 关闭商品详情弹窗
    productDetailVisible.value = false
    
    // 执行购买操作
    await executePurchase(params)
    
  } catch (error) {
    console.error('购买失败:', error)
    ElMessage.error('购买失败')
  }
}

// 执行购买操作
const executePurchase = async (data, isFirstAttempt = true) => {
  // 显示全屏加载动画
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '正在处理购买请求...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  
  try {
    const response = await purchaseProduct(data)
    
    if (response.code === 200) {
      const currencyType = getCurrencyType(selectedProduct.value.currencyType)
      ElMessage.success(`成功购买 ${selectedProduct.value.name} x${purchaseQuantity.value}，共消耗 ${totalPrice.value} ${currencyType}`)
      
      // 重置数据
      selectedProduct.value = null
      purchaseQuantity.value = 1
      
      // 刷新商品列表（可能库存有变化）
      fetchOfficialStoreList()
      
      // 重置任何可能存在的二级密码状态
      secondaryPasswordVisible.value = false
      secondaryPasswordForm.password = ''
      pendingOperation.value = null
    } else if (response.code === 9 && isFirstAttempt) {
      // 需要二级密码验证
      pendingOperation.value = {
        type: 'purchase',
        data: data
      }
      secondaryPasswordVisible.value = true
      ElMessage.warning('需要二级密码验证')
    } else {
      ElMessage.error(response.msg || '购买失败')
    }
  } catch (error) {
    console.error('购买失败:', error)
    ElMessage.error('购买失败，请稍后重试')
  } finally {
    // 关闭加载动画
    loadingInstance.close()
  }
}

const startCountdown = () => {
  countdownTimer = setInterval(() => {
    if (countdown.seconds > 0) {
      countdown.seconds--
    } else if (countdown.minutes > 0) {
      countdown.minutes--
      countdown.seconds = 59
    } else if (countdown.hours > 0) {
      countdown.hours--
      countdown.minutes = 59
      countdown.seconds = 59
    } else {
      clearInterval(countdownTimer)
    }
  }, 1000)
}

// 确认二级密码验证
const confirmSecondaryPassword = async () => {
  if (!pendingOperation.value) return

  // 验证二级密码格式
  if (!/^\d{6}$/.test(secondaryPasswordForm.password)) {
    ElMessage.error('二级密码必须是6位数字')
    return
  }

  verificationLoading.value = true

  try {
    // 1. 校验二级密码
    const verifyResponse = await verifySecondaryPassword({
      password: secondaryPasswordForm.password
    })

    if (verifyResponse.code !== 200) {
      ElMessage.error(verifyResponse.msg || '二级密码错误，请重新输入')
      verificationLoading.value = false
      return
    }

    // 2. 密码验证成功提示
    ElMessage.success('二级密码验证成功，正在重新尝试操作...')
    secondaryPasswordVisible.value = false // 关闭密码弹窗

    // 3. 重新执行之前的操作
    if (pendingOperation.value.type === 'purchase') {
      executePurchase(pendingOperation.value.data, false).catch(err => {
        console.error('重新执行购买失败:', err)
      })
    }

    // 4. 重置表单状态
    secondaryPasswordForm.password = ''
    pendingOperation.value = null

  } catch (error) {
    console.error('二级密码验证失败:', error)
    ElMessage.error('二级密码验证失败，请重试')
  } finally {
    verificationLoading.value = false
  }
}

// 取消二级密码验证
const cancelSecondaryPasswordVerification = () => {
  secondaryPasswordVisible.value = false
  secondaryPasswordForm.password = ''
  pendingOperation.value = null
}

// 购买记录相关方法
const showPurchaseRecords = () => {
  purchaseRecordsVisible.value = true
  recordsPagination.currentPage = 1
  fetchPurchaseRecords()
}

const fetchPurchaseRecords = async (isLoadMore = false) => {
  if (!isLoadMore) {
    recordsLoading.value = true
  }
  
  try {
    const params = {
      currentPage: recordsPagination.currentPage,
      limit: recordsPagination.limit
    }
    
    const response = await getPurchaseRecords(params)
    
    if (response.code === 200) {
      if (isLoadMore) {
        purchaseRecords.value = [...purchaseRecords.value, ...response.data.list]
      } else {
        purchaseRecords.value = response.data.list || []
      }
      
      recordsPagination.totalCount = response.data.totalCount || 0
      recordsPagination.totalPage = response.data.totalPage || 1
    } else {
      ElMessage.error(response.msg || '获取购买记录失败')
    }
  } catch (error) {
    console.error('获取购买记录失败:', error)
    ElMessage.error('获取购买记录失败，请稍后重试')
  } finally {
    recordsLoading.value = false
  }
}

const handleRecordsPageChange = (page) => {
  recordsPagination.currentPage = page
  fetchPurchaseRecords()
}

// 格式化时间
const formatTime = (timestamp) => {
  if (!timestamp) return '-'
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}



// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    'SUCCESS': 'success',
    'PENDING': 'warning',
    'FAILED': 'danger',
    'CANCELLED': 'info'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'SUCCESS': '购买成功',
    'PENDING': '处理中',
    'FAILED': '购买失败',
    'CANCELLED': '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 生命周期
onMounted(() => {
  filterProducts()
  startCountdown()
  // 获取官方商城数据
  fetchOfficialStoreList()
})

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer)
  }
})
</script>

<style scoped lang="scss">
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.official-store {
  min-height: 100vh;
  background: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 标签页样式 */
.store-tabs {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tabs-container {
  width: 100%;
  margin: 0;
  padding: 0 24px;
}

.tab-buttons {
  display: flex;
  gap: 0;
}

.tab-btn {
  padding: 16px 32px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 3px solid transparent;
  position: relative;
}

.tab-btn:hover {
  color: #165dff;
  background: rgba(22, 93, 255, 0.05);
}

.tab-btn.active {
  color: #165dff;
  border-bottom-color: #165dff;
  background: rgba(22, 93, 255, 0.05);
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(135deg, #165dff, #4080ff);
  border-radius: 2px 2px 0 0;
}

.tab-content {
  animation: fadeInUp 0.5s ease-out;
}

/* 导航栏样式 */
.store-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.nav-container {
  width: 100%;
  margin: 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand-title {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #165dff, #4080ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-menu {
  display: flex;
  gap: 32px;
}

.nav-link {
  text-decoration: none;
  color: #64748b;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: #4080ff;
  background: rgba(22, 93, 255, 0.1);
}

.nav-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.cart-btn,
.user-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-btn:hover,
.user-btn:hover {
  background: rgba(102, 126, 234, 0.2);
  transform: translateY(-2px);
}

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: left;
}

/* 英雄区样式 */
.hero-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #165dff 0%, #4080ff 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.hero-container {
  width: 100%;
  margin: 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-title {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 32px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 16px;
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-placeholder {
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-icon {
  font-size: 80px;
  color: rgba(255, 255, 255, 0.8);
}

/* 按钮样式 */
.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
}

.btn-primary {
  background: white;
  color: #165dff;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.btn-flash-sale {
  color: white;
  width: 100%;
  font-weight: 700;
}

.btn-flash-sale:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(22, 93, 255, 0.4);
}

.btn-cart {
  background: rgba(22, 93, 255, 0.1);
  color: #165dff;
  border: 1px solid rgba(22, 93, 255, 0.2);
}

.btn-cart:hover {
  background: rgba(22, 93, 255, 0.2);
  transform: translateY(-2px);
}

.btn-buy {
  background: linear-gradient(135deg, #165dff, #4080ff);
  color: white;
}

.btn-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(22, 93, 255, 0.4);
}

.btn-outline {
  background: transparent;
  color: #165dff;
  border: 2px solid #165dff;
}

.btn-outline:hover {
  background: #165dff;
  color: white;
  transform: translateY(-2px);
}

/* 区域容器样式 */
.section-container {
  width: 100%;
  margin: 0;
  padding: 0 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
}

.header-content {
  width: 100%;
  display: flex;
  flex: 1;
  /* text-align: left; */
}

.title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-action {
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 24px;
}

.view-more-btn {
  background: linear-gradient(135deg, #4080ff, #165dff);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.view-more-btn:hover {
  background: linear-gradient(135deg, #165dff, #0f4fff);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(64, 128, 255, 0.3);
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.section-subtitle {
  margin: 0;
  color: #64748b;
  font-size: 16px;
  white-space: nowrap;
}

/* 限时抢购区样式 */
.flash-sale-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.countdown-timer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 16px;
}

.timer-display {
  display: flex;
  gap: 8px;
}

.timer-unit {
  background: linear-gradient(135deg, #4080ff, #165dff);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: left;
  min-width: 60px;
}

.timer-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  /* Removed background-color to inherit gradient from parent */
}

.timer-label {
  font-size: 12px;
  opacity: 0.9;
}

.flash-sale-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.flash-sale-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.flash-sale-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, #4080ff, #165dff);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
}

.card-image {
  text-align: left;
  margin-bottom: 16px;
}

.image-placeholder {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #4080ff, #165dff); /* New Blue Gradient */
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: white;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
  text-align: left;
}

.card-price {
  text-align: left;
  margin-bottom: 16px;
}

.price-current {
  font-size: 24px;
  font-weight: 700;
  color: #165dff !important; /* New Dark Blue with !important */
  margin-right: 8px;
}

.price-original {
  font-size: 16px;
  color: #94a3b8;
  text-decoration: line-through;
}

.card-progress {
  margin-bottom: 16px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4080ff, #165dff); /* New Blue Gradient */
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: #64748b;
  text-align: left;
  display: block;
}

.flash-sale-btn {
  width: 100%;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #4080ff, #165dff) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
}

.flash-sale-btn:hover {
  background: linear-gradient(135deg, #165dff, #4080ff) !important; /* New Blue Gradient for hover */
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(22, 93, 255, 0.4) !important;
}

/* 分类区样式 */
.categories-section {
  padding: 80px 0;
  background: #f8fafc;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.category-card {
  background: white;
  padding: 32px 24px;
  border-radius: 16px;
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.category-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #4080ff, #165dff);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px 0;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.custom-svg-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-svg-icon svg {
  width: 100%;
  height: 100%;
  color: currentColor;
}

.text-icon {
  font-size: 18px;
  font-weight: 600;
  color: white;
  text-align: center;
}

.category-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.category-desc {
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.5;
}

.category-count {
  color: #667eea;
  font-weight: 600;
  font-size: 14px;
}

/* 商品区样式 */
.products-section {
  padding: 80px 0;
  background: white;
}

.section-filters {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 24px;
}

.filter-btn {
  padding: 8px 16px;
  border: 2px solid #e2e8f0;
  background: white;
  color: #64748b;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.filter-btn:hover,
.filter-btn.active {
  border-color: #165dff;
  color: #165dff;
  background: rgba(22, 93, 255, 0.05);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-bottom: 48px;
}

.product-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.product-image {
  position: relative;
  padding: 32px;
  background: #f8fafc;
  text-align: left;
}

.product-image .image-placeholder {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #4080ff, #165dff);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: white;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
}

.product-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
}

.badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.badge-pet {
  background: #67c23a;
  color: white;
}

.badge-item {
  background: #409eff;
  color: white;
}

.badge-fashion {
  background: #f093fb;
  color: white;
}

.badge-privilege {
  background: #ffd700;
  color: #8b4513;
}

.badge-giftpack {
  background: #e6a23c;
  color: white;
}

.product-content {
  padding: 24px;
}

.product-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.product-desc {
  color: #64748b;
  margin-bottom: 16px;
  line-height: 1.5;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.stars {
  display: flex;
  gap: 2px;
}

.stars i {
  color: #e2e8f0;
  font-size: 14px;
}

.stars i.active {
  color: #4080ff;
}

.rating-text {
  color: #64748b;
  font-size: 14px;
}

.product-price {
  margin-bottom: 16px;
}

.product-actions {
  display: flex;
  gap: 8px;
}

.product-actions .el-button {
  flex: 1;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-actions .el-button--primary {
  background: linear-gradient(135deg, #4080ff 0%, #165dff 100%);
  color: white;
}

.product-actions .el-button--primary:hover {
  background: linear-gradient(135deg, #165dff 0%, #4080ff 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.product-actions .el-button--success {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: white;
}

.product-actions .el-button--success:hover {
  background: linear-gradient(135deg, #0e8378 0%, #2dd865 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
}

.product-actions .el-button .el-icon {
  margin-right: 4px;
}

.load-more {
  text-align: left;
}

.load-more .el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #4080ff, #165dff);
  border: none;
  color: white;
  padding: 12px 32px;
  box-shadow: 0 2px 8px rgba(64, 128, 255, 0.3);
}

.load-more .el-button:hover {
  background: linear-gradient(135deg, #5a6fd8, #6a4190);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

/* 底部样式 */
.store-footer {
  background: #1e293b;
  color: white;
  padding: 48px 0 24px;
}

.footer-container {
  width: 100%;
  margin: 0;
  padding: 0 24px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  margin-bottom: 32px;
}

.footer-section h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-section ul {
  list-style: none;
}

.footer-section li {
  margin-bottom: 8px;
}

.footer-section a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: white;
}

.social-links {
  display: flex;
  gap: 16px;
}

.social-link {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.footer-bottom {
  text-align: left;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 16px;
  }
  
  .nav-menu {
    display: none;
  }
  
  .hero-container {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 32px;
  }
  
  .hero-title {
    font-size: 32px;
  }
  
  .section-container {
    padding: 0 16px;
  }
  
  .flash-sale-grid,
  .categories-grid,
  .products-grid,
  .recommended-grid,
  .new-products-grid {
    grid-template-columns: 1fr;
  }
  
  .countdown-timer {
    flex-direction: column;
    gap: 8px;
  }
  
  .timer-display {
    justify-content: center;
  }
  
  .section-filters {
    flex-wrap: wrap;
  }
  
  .product-actions {
    flex-direction: column;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .flash-sale-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .products-grid,
  .recommended-grid,
  .new-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 商城分类样式 */
.store-categories {
  padding: 40px 0;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.category-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
  border-color: #4080ff;
}

.category-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #4080ff, #165dff);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: white;
  font-size: 28px;
}

.category-name {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.category-desc {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.category-count {
  background: #f1f5f9;
  color: #475569;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

/* 商城横幅样式 */
.store-banner {
  background: linear-gradient(135deg, #4080ff 0%, #165dff 100%);
  border-radius: 16px;
  padding: 40px;
  text-align: left;
  color: white;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.store-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.banner-container {
  width: 100%;
  margin: 0;
  padding: 0 24px;
}

.banner-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.banner-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.banner-subtitle {
  font-size: 18px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
}

.banner-features {
  display: flex;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.banner-visual {
  position: relative;
  height: 200px;
}

.floating-icons {
  position: relative;
  width: 100%;
  height: 100%;
}

.floating-icon {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  padding: 16px;
  animation: floatIcon 3s ease-in-out infinite;
}

.floating-icon:nth-child(1) {
  top: 20%;
  left: 20%;
}

.floating-icon:nth-child(2) {
  top: 60%;
  right: 30%;
}

.floating-icon:nth-child(3) {
  bottom: 20%;
  left: 40%;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* 商城分类样式优化 */
.store-categories {
  margin-bottom: 50px;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 30px;
}

/* 商品分类分段控制器样式 */
.product-category-filter {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.product-category-filter .el-segmented {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.product-category-filter .el-segmented__item {
  padding: 12px 24px;
  font-weight: 500;
  font-size: 14px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.product-category-filter .el-segmented__item.is-selected {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
}

.section-subtitle {
  color: #7f8c8d;
  font-size: 14px;
  margin-top: 5px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.category-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #f1f3f4;
  display: flex;
  align-items: center;
  gap: 20px;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.6s;
}

.category-card:hover::before {
  left: 100%;
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

.category-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #4080ff 0%, #165dff 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(22, 93, 255, 0.3);
  flex-shrink: 0;
}

.category-info {
  flex: 1;
}

.category-name {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.category-desc {
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.category-count {
  display: inline-block;
  background: linear-gradient(135deg, #4080ff 0%, #165dff 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.category-arrow {
  color: #bdc3c7;
  font-size: 20px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.category-card:hover .category-arrow {
  color: #667eea;
  transform: translateX(5px);
}

/* 推荐商品样式优化 */
.recommended-section {
  /* margin-top: 50px; */
  /* padding: 40px 0; */
}

/* 新品上架样式 */

.recommended-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.new-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.recommended-card,
.new-product-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid #f1f3f4;
  cursor: pointer;
}

.recommended-card::before,
.new-product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.05), transparent);
  transition: left 0.6s;
}

.recommended-card:hover::before,
.new-product-card:hover::before {
  left: 100%;
}

.recommended-card:hover,
.new-product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
  border-color: #667eea;
}

.product-image {
  position: relative;
  text-align: left;
  margin-bottom: 20px;
}

.product-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: linear-gradient(135deg, #4080ff 0%, #165dff 100%);
}

/* 库存信息样式 */
.stock-info {
  font-size: 12px;
  color: #666;
}

.stock-info.unlimited {
  color: #67c23a;
}

/* 库存和限购信息行布局 */
.stock-and-limit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  gap: 12px;
}

/* 限购信息样式 */
.limit-info {
  font-size: 12px;
  color: #e6a23c;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  
  .el-icon {
    font-size: 14px;
  }
}

/* 分页容器样式 */
.load-more-container {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  padding: 20px 0;
}

.load-more-btn {
  padding: 12px 32px;
  font-size: 14px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.load-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
}

.no-more-data {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  padding: 20px 0;
  color: #909399;
  font-size: 14px;
  border-top: 1px solid #f0f0f0;
}

.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.empty-icon {
  margin-bottom: 24px;
  color: #c0c4cc;
}

.empty-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 12px 0;
}

.empty-description {
  font-size: 14px;
  color: #909399;
  margin: 0 0 24px 0;
  max-width: 400px;
  line-height: 1.6;
}

.refresh-btn {
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, #4080ff 0%, #165dff 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(64, 128, 255, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(22, 93, 255, 0.4) !important;
}

.refresh-btn .el-icon {
  font-size: 16px;
}

.product-icon {
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  box-shadow: 0 8px 25px rgba(22, 93, 255, 0.3);
  transition: all 0.3s ease;
}

.recommended-card:hover .product-icon,
.new-product-card:hover .product-icon {
  transform: scale(1.1);
  box-shadow: 0 12px 35px rgba(22, 93, 255, 0.4);
}

.product-badges {
  position: absolute;
  top: -10px;
  right: -10px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.badge-pet {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
}

.badge-item {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
}

.badge-fashion {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.badge-privilege {
  background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
  color: #8b4513;
}

.badge-giftpack {
  background: linear-gradient(135deg, #e6a23c 0%, #f56c6c 100%);
}

.product-content {
  text-align: left;
  position: relative;
  z-index: 1;
}

.product-title {
  font-size: 18px;
  font-weight: 600;
}

/* 商品详情弹窗样式 */
.product-detail-dialog {
  .el-dialog {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  .el-dialog__header {
    background: linear-gradient(135deg, #4080ff 0%, #165dff 100%);
    color: white;
    padding: 24px 32px;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
      animation: float 6s ease-in-out infinite;
    }
    
    .el-dialog__title {
      font-size: 20px;
      font-weight: 700;
      position: relative;
      z-index: 1;
    }
    
    .el-dialog__close {
      color: white;
      font-size: 20px;
      position: relative;
      z-index: 1;
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.1);
      }
    }
  }
  
  .el-dialog__body {
    padding: 32px;
    background: #f8fafc;
  }
}

.product-detail-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-info {
  position: relative;
  display: flex;
  gap: 24px;
  margin-bottom: 0;
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  
  .product-icon-large {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      background: linear-gradient(135deg, #4080ff, #165dff);
      border-radius: 16px;
      color: white;
      font-size: 40px;
      box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
      flex-shrink: 0;
      
  }
  
  .product-badges {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    
    .badge {
      padding: 6px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      white-space: nowrap;
      flex-shrink: 0;
      width: fit-content;
      text-align: center;
    }
    
    .badge-pet {
      background: linear-gradient(135deg, #67c23a, #85ce61);
      color: white;
    }
    
    .badge-item {
      background: linear-gradient(135deg, #409eff, #79bbff);
      color: white;
    }
    
    .badge-fashion {
      background: linear-gradient(135deg, #f093fb, #f5b2ff);
      color: white;
    }
    
    .badge-privilege {
      background: linear-gradient(135deg, #ffd700, #ffe066);
      color: #8b4513;
    }
    
    .badge-giftpack {
      background: linear-gradient(135deg, #e6a23c, #eebe77);
      color: white;
    }
  }
  
  .product-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .product-name {
      font-size: 20px;
      font-weight: 700;
      color: #1e293b;
      margin: 0;
      line-height: 1.3;
    }
    
    .product-description {
      font-size: 14px;
      color: #64748b;
      margin: 0;
      line-height: 1.6;
    }
  }
}

.purchase-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  
  .price-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    .price-row {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .price-label {
        font-size: 16px;
        font-weight: 500;
        color: #64748b;
      }
      
      .price-value {
        font-size: 24px;
        font-weight: 700;
        background: linear-gradient(135deg, #f56c6c, #f78989);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }
    
    .original-price-row {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .original-price {
        font-size: 14px;
        color: #94a3b8;
        text-decoration: line-through;
      }
      
      .discount-amount {
        font-size: 14px;
        color: #f56c6c;
        background: rgba(245, 108, 108, 0.1);
        padding: 4px 8px;
        border-radius: 8px;
        font-weight: 500;
      }
    }
    
    .limit-info-dialog {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #f56c6c;
      background: rgba(245, 108, 108, 0.1);
      padding: 8px 12px;
      border-radius: 8px;
      font-weight: 500;
      
      .el-icon {
        font-size: 16px;
      }
    }
  }
  
  .quantity-section {
    .quantity-row {
      display: flex;
      align-items: center;
      gap: 16px;
      
      .quantity-label {
        font-size: 16px;
        font-weight: 500;
        color: #64748b;
      }
      
      .el-input-number {
        .el-input__inner {
          border-radius: 8px;
          border: 2px solid #e2e8f0;
          transition: all 0.3s ease;
          
          &:focus {
            border-color: #4080ff;
            box-shadow: 0 0 0 3px rgba(64, 128, 255, 0.1);
          }
        }
        
        .el-input-number__decrease,
        .el-input-number__increase {
          border-radius: 6px;
          border: none;
          background: #f1f5f9;
          color: #64748b;
          transition: all 0.3s ease;
          
          &:hover {
            background: #4080ff;
            color: white;
          }
        }
      }
    }
  }
  
  .total-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 20px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    margin-top: 8px;
    
    .total-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .total-label {
        font-size: 18px;
        font-weight: 600;
        color: #1e293b;
      }
      
      .total-price {
        font-size: 28px;
        font-weight: 700;
        background: linear-gradient(135deg, #f56c6c, #f78989);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 32px;
  background: white;
  border-top: 1px solid #e2e8f0;
  
  .el-button {
    border-radius: 8px;
    font-weight: 500;
    padding: 12px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    
    &.el-button--default {
      background: #f1f5f9;
      color: #64748b;
      
      &:hover {
        background: #e2e8f0;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
    
    &.el-button--primary {
      background: linear-gradient(135deg, #4080ff 0%, #165dff 100%);
      color: white;
      
      &:hover {
        background: linear-gradient(135deg, #165dff 0%, #4080ff 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      }
    }
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.product-desc {
  color: #7f8c8d;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.product-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 15px;
}

.stars {
  display: flex;
  gap: 2px;
}

.rating-text {
  color: #7f8c8d;
  font-size: 12px;
}

.product-price {
  margin-bottom: 20px;
}

.price-current {
  font-size: 24px;
  font-weight: 700;
  color: #4080ff;
  margin-right: 8px;
}

.price-original {
  font-size: 16px;
  color: #95a5a6;
  text-decoration: line-through;
  margin-right: 8px;
}

.price-discount {
  display: inline-block;
  background: linear-gradient(135deg, #4080ff 0%, #165dff 100%);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.product-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.action-btn:hover {
  transform: translateY(-2px);
}

.buy-now {
  background: linear-gradient(135deg, #4080ff 0%, #165dff 100%) !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(64, 128, 255, 0.3);
}

.buy-now:hover {
  box-shadow: 0 8px 25px rgba(22, 93, 255, 0.4) !important;
}



.flash-sale-card,
.category-card,
.product-card {
  animation: fadeInUp 0.6s ease-out;
}

/* 悬浮按钮样式 */
.floating-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #4080ff 0%, #165dff 100%) !important;
  border: none !important;
  box-shadow: 0 8px 25px rgba(64, 128, 255, 0.3);
  transition: all 0.3s ease;
}

.floating-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(64, 128, 255, 0.4) !important;
}

.floating-btn:active {
  transform: translateY(-1px);
}

/* 购买记录弹窗样式 */
.purchase-records-dialog {
  .el-dialog__header {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-bottom: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
  }
  
  .el-dialog__title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
  }
}

.purchase-records-content {
  max-height: 500px;
  overflow-y: auto;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty-records {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  
  .empty-icon {
    margin-bottom: 16px;
    color: #94a3b8;
  }
  
  .empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
  }
  
  .empty-description {
    font-size: 14px;
    color: #94a3b8;
    margin: 0;
  }
}

.record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  
  &:hover {
    border-color: #4080ff;
    box-shadow: 0 4px 12px rgba(64, 128, 255, 0.1);
  }
}

.record-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.record-product {
  display: flex;
  align-items: center;
  gap: 12px;
  
  .product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #4080ff, #165dff);
    border-radius: 12px;
    color: white;
    flex-shrink: 0;
  }
  
  .product-details {
    .product-name {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 4px 0;
    }
    
    .product-desc {
      font-size: 14px;
      color: #64748b;
      margin: 0;
    }
  }
}

.record-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 20px;
  
  .record-quantity,
  .record-price {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .label {
      font-size: 14px;
      color: #64748b;
    }
    
    .value {
      font-size: 14px;
      font-weight: 600;
      color: #1e293b;
    }
  }
  
  .record-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #94a3b8;
  }
}

.record-status {
  flex-shrink: 0;
}

.records-pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  
  .pagination-container {
    flex: 1;
    display: flex;
    justify-content: center;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .floating-btn {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
  }
  
  .purchase-records-dialog {
    .el-dialog {
      width: 95% !important;
      margin: 5vh auto !important;
    }
  }
  
  .record-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .record-meta {
    margin-left: 0;
    width: 100%;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #165dff;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4080ff;
}

/* 响应式设计 - 分段控制器 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .header-action {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .product-category-filter .el-segmented__item {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* 二级密码验证对话框样式 */
.secondary-password-container {
  padding: 20px 0;
}

.secondary-password-container .verification-message {
  font-size: 16px;
  color: #606266;
  margin-bottom: 20px;
  text-align: center;
}

.secondary-password-container .el-form-item {
  margin-bottom: 20px;
}

.secondary-password-container .verification-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.secondary-password-container .verification-actions .el-button {
  min-width: 80px;
}

.secondary-password-container .verification-tip {
  font-size: 12px;
  color: #909399;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .header-action {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .product-category-filter .el-segmented__item {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .section-title {
    font-size: 20px;
  }
  
  .section-subtitle {
    font-size: 13px;
  }
}
/* 商品图片样式 */
.product-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
}

.product-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

/* 商品详情弹窗中的大图片样式 */
.product-image-container-large {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  border: none;
}

.product-image-large {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
}

.product-icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #4080ff, #165dff);
  border-radius: 16px;
  color: white;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.3);
}

.product-image-thumb:hover {
  transform: scale(1.05);
}
</style>